<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>年会抽奖</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖：<span id="three">???</span></h5>
  </div>
  <script>
// 1.准备一个数组
    const arr =['郭保坤','林耀东','wxj','林俊杰','Bigbang']
    // 2.准备一个随机数
    // const random=Math.floor(Math.random()*arr.length)
    // 获取div下面的所有span标签
    const spans = document.querySelectorAll('div span')
    // 修改网页元素
    // 生成一个随机数 需要生成多个 所以可以用for循环来写
    for(let i=0;i<spans.length;i++){
    const random=Math.floor(Math.random()*arr.length)

    // 更换内容
      spans[i].innerHTML = arr[random]
      // 再删除
      arr.splice(random,1)
    }
    console.log(arr)


  </script>
</body>

</html>